<template>
  <div class="bindemail">
    <van-nav-bar
      :title="$t('bind.emailtitle')"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="bindemail-body">
      <van-form ref="fromRef">
        <van-cell-group :border="false">
          <div class="bindemail-label marg-btm">{{ t("bind.email") }}</div>
          <van-field
            :border="false"
            class="dev-field"
            v-model="data.username"
            name="用户名"
            :placeholder="t('bind.emailmsg')"
            :rules="[{ required: true, message: t('bind.emailmsg') }]"
          />
          <div class="bindemail-label margin-top">{{ t("bind.code") }}</div>
          <van-field
            v-model="data.password"
            type="password"
            name="密码"
            class="dev-field"
            :placeholder="t('bind.codemsg')"
            :rules="[{ required: true, message: t('bind.codemsg') }]"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                round
                style="padding: 5px 16px"
                >{{ t("login.firstsend") }}</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </div>

    <div class="bindemail-foot">
      <van-button type="primary" round width="244px" @click="onSubmit">{{
        t("bind.btnsub")
      }}</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const { t } = useI18n();
const data = reactive({
  username: "",
  password: "",
});
const fromRef = ref(null);
function onClickLeft() {
  history.back();
}
function onSubmit() {
  fromRef.value.validate().then((res) => {
    router.push({ path: "/information" });
  });
}
</script>

<style lang="less" scoped>
.bindemail {
  &-label {
    line-height: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-top: 13px;
  }
  &-body {
    padding: 0px 16px;
  }
  &-foot {
    margin-top: 41px;
    text-align: center;
    button.van-button.van-button--primary.van-button--normal.van-button--round {
      width: 244px;
    }
  }
  .marg-btm {
    margin-bottom: 8px;
  }
  .margin-top {
    margin-top: 21px;
  }
}
</style>